<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <a-form layout="horizontal" :model="mdl" ref="form" :labelCol="{ span: 4 }" :wrapperCol="{ span: 18 }"
                    :rules="rules">
                    <a-form-item :label="i18n('form.appId', '应用')" name="appId">
                        <a-select v-model:value="mdl.appId" @select="handleAppChange">
                            <a-select-option v-for="app in sysApps" :key="app.appId">{{
                                $i18(app.clientName, '菜单名称')
                            }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>

                    <a-form-item :label="$comi18('business.parentMenu', '父菜单')" name="parentId">
                        <a-tree-select v-model:value="mdl.parentId"
                            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :treeData="parentMenus"
                            :placeholder="$comi18('business.parentMenu', '请选择父菜单', 'select')" allowClear>
                        </a-tree-select>
                    </a-form-item>

                    <a-form-item :label="$ti18('rxForm.name', '名称')" name="name">
                        <lang-input v-model="mdl.name"
                            :placeholder="$ti18('rxForm.name', '请输入名称', '', 'input')"></lang-input>
                    </a-form-item>
                    <a-form-item :label="$comi18('business.aliasKey', '标识键')" name="menuKey">
                        <a-input v-model:value="mdl.menuKey" :placeholder="$comi18('business.aliasKey', '标识键')" />
                    </a-form-item>

                    <a-form-item :label="$comi18('business.icon', '图标')" name="iconPic">
                        <rx-icon-select style="width: 100%" v-model="mdl.iconPic" :iconUrl="iconUrl"></rx-icon-select>
                    </a-form-item>

                    <a-form-item :label="$comi18('business.accessMode', '访问方式')" name="showType">
                        <a-radio-group v-model:value="mdl.showType" :options="showTypeOptions" />
                    </a-form-item>

                    <a-form-item :label="$comi18('business.displayOrder', '显示顺序')" name="sn">
                        <a-input-number style="width: 100%" v-model:value="mdl.sn"
                            :placeholder="$comi18('business.displayOrder', '显示顺序')" />
                    </a-form-item>
                </a-form>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import { Util, RxDialog, RxLayout, RxIconSelect } from "@lowcode/jpaas-base-lib";
import ScreenViewManageApi from "@/api/screen/core/screen-view-manage";
import { mapState } from 'pinia';
import useMain from "../../../../stores/use-main";
import LangInput from "@/langauge-input/lang-input.vue";

export default {
    name: "SysMenuAddNode",
    props: ["destroy", "record"],
    components: {
        RxDialog,
        RxLayout,
        RxIconSelect,
        LangInput
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    data() {
        return {
            mdl: {
                appId: "",
                parentId: "",
                name: "",
                menuKey: "",
                iconPic: "",
                menuType: "C",
                showType: "NEW_WIN",
                settingType: "screen",
                sn: 1,
                params: ""
            },
            rules: {
                appId: [{ required: true, message: this.i18n1('msa.selectApp', '请选择应用'), trigger: 'change' }],
                name: [{ required: true, message: this.$ti18('rxForm.name', '请输入名称', '', 'input'), trigger: 'change' }],
                menuKey: [{
                    required: true,
                    message: this.$ti18('rxForm.alias', '请输入标识键', '', 'input'),
                    trigger: 'change'
                }],
                iconPic: [{
                    required: true,
                    message: this.$comi18('business.icon', '请选择图标', 'select'),
                    trigger: 'change'
                }],
                showType: [{ required: true, message: this.i18n1('msa.selectMode', '请选择访问方式'), trigger: 'change' }],
                sn: [{
                    required: true,
                    message: this.$comi18('business.displayOrder', '请输入顺序数字', 'input'),
                    trigger: 'change'
                }],
            },
            showTypeOptions: [
                { label: this.$comi18('business.nweWind', '新窗口'), value: 'NEW_WIN' },
                // {label: "URL访问",value:'URL'}
            ],
            //所有应用
            sysApps: [],
            //所选应用菜单
            parentMenus: [],
            iconUrl: {}
        }
    },
    created() {
        //获取应用
        this.loadAllSysApp();
        this.init();
        let baseUrl = import.meta.env.JPAAS_BASE_URL
        this.iconUrl = {
            lineUrl: baseUrl + '/iconfont-svg/line/iconfont.js',
            fillUrl: baseUrl + '/iconfont-svg/fill/iconfont.js',
            colorUrl: baseUrl + '/iconfont-svg/color/iconfont.js'
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "SysTree", key);
        },
        i18n1(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        init() {
            this.mdl.name = this.record.name;
            this.mdl.menuKey = "Screen_" + this.record.alias || "";
        },
        loadAllSysApp() {
            ScreenViewManageApi.getAppById(this.appId).then(res => {
                this.sysApps = res.data;
                if (this.sysApps.length == 1) {
                    this.mdl.appId = this.sysApps[0].appId
                    this.handleAppChange(this.sysApps[0].appId)
                }
            })
        },
        handleAppChange(value) {
            this.parentMenus = [];
            ScreenViewManageApi.getAllSysMenuListByAppId({ appId: value }).then(res => {
                this.buildtree(res, this.parentMenus, '0');
            })
        },
        buildtree(list, arr, parentId) {
            list.forEach(item => {
                if (item.parentId === parentId) {
                    let child = {
                        key: item.id,
                        value: item.id + '',
                        title: this.$i18(item.name, '父菜单名称'),
                        children: []
                    }
                    this.buildtree(list, child.children, item.id)
                    arr.push(child)
                }
            })
        },
        handleSubmit(vm) {
            let self = this;
            self.$refs.form.validate().then(() => {
                self.mdl.params = JSON.stringify({
                    alias: self.record.alias,
                    url: "/screen"
                });
                let appId = self.appId;
                if (appId) {
                    self.mdl.appId = appId;
                }
                if (typeof self.mdl.name !== "string") {
                    self.mdl.name = JSON.stringify(self.mdl.name)
                }
                ScreenViewManageApi.saveSysMenu(self.mdl).then(() => {
                    Util.closeWindow(self, "ok");
                }).catch(() => {
                    vm.loading = true;
                }).finally(() => {
                    vm.loading = true;
                })
            });
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    },
    watch: {
        'mdl.iconPic': {
            handler(v) {
                this.mdl.iconPc = v;
            },
            deep: true
        }
    }
}
</script>

<style scoped></style>
